<template>
    <view class="page-box">
        <view class="poster row rowCenter verCenter">
            <template v-if="imageSrc">
                <image :src="imageSrc" style="width: 100%; height: 962rpx;margin: 0 auto;"></image>
            </template>
            <template v-else>
                <canvas id="myCanvas" canvas-id="myCanvas" style="width: 100%; height: 962rpx;margin: 0 auto;opacity: 0;"></canvas>
            </template>
        </view>
        <view class="saveImage row rowCenter verCenter" @click="save()">长按图片保存到相册</view>
    </view>
</template>


<script>
    import { API } from '@/util/api.js';

    export default {
        data() {
            return {
                info: {}, //产品详情
                userInfo: {}, //个人用户信息
                id: '', //产品id
                productQrCodePic: '', //二维码
                imageSrc: '', //生成的海报地址
                backgroundImage: null, //预加载背景图
                canvasWidth: 0,
                canvasHeight: 0
            };
        },
        onLoad(options) {
            this.id = options.id;
            this.preloadBackgroundImage();
            this.getData();
        },
        methods: {
            /**
             * 预加载背景图
             */
            preloadBackgroundImage() {
                uni.getImageInfo({
                    src: '../../static/share.png',
                    success: res => {
                        this.backgroundImage = res.path;
                    }
                });
            },
            /**
             * 获取数据（合并三个接口为一个）
             */
            getData() {
                uni.showLoading({
                    mask: true,
                    title: '图片生成中...'
                });
                this.request(API.productQrCode, 'GET', { product_id: this.id }, false).then(res => {
                    if (res.code === 0) {
                        // 解构新的返回数据结构
                        var { product_info, user_info, qr_code } = res.data;
                        
                        // 设置产品信息（保持原有逻辑）
                        this.info = product_info;
                        this.info.product_quota = Number(this.info.product_quota) / 10000; //最高额度
                        
                        // 设置用户信息（保持原有逻辑）
                        this.userInfo = user_info;
                        
                        // 设置二维码（保持原有逻辑）
                        this.productQrCodePic = qr_code;
                        
                        // 直接进入canvas绘制流程
                        this.setCanvasSize();
                    } else {
                        uni.hideLoading();
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 设置canvas尺寸
             */
            setCanvasSize() {
                const query = uni.createSelectorQuery().in(this);
                query.select('#myCanvas').boundingClientRect(data => {
                    if (data) {
                        this.canvasWidth = data.width;
                        this.canvasHeight = data.height;
                        this.drawCanvas();
                    } else {
                        // 如果获取不到尺寸，使用默认值
                        this.canvasWidth = 375;
                        this.canvasHeight = 962 * (375 / 750);
                        this.drawCanvas();
                    }
                }).exec();
            },
            /**
             * 初始化海报
             */
            drawCanvas() {
                console.log('开始绘制图片');

                // 获取canvas上下文
                const ctx = uni.createCanvasContext('myCanvas', this);
                const width = this.canvasWidth;
                const height = this.canvasHeight;

                // 绘制圆角矩形背景
                this.drawRoundRect(ctx, 0, 0, width, height, 10);

                // 使用预加载的背景图
                const bgImage = this.backgroundImage || '../../static/share.png';
                ctx.drawImage(bgImage, 0, 0, width, height);

                // 设置主标题 "汽车金融产品"
                ctx.setFontSize(26);
                ctx.setFillStyle('#FFFFFF');
                ctx.font = '26px PingFangSC';
                const mainTitle = this.info.product_name;
                // 通过 measureText 获取文本宽度，然后计算居中位置
                let mainTitleWidth = ctx.measureText(mainTitle).width;
                ctx.fillText(mainTitle, (width - mainTitleWidth) / 2, 58);

                // 绘制副标题 "钱拿走 车照开"
                const subTitle = '钱拿走 车照开';
                let subTitleWidth = ctx.measureText(subTitle).width;
                ctx.fillText(subTitle, (width - subTitleWidth) / 2, 95);

                // 绘制白色线条
                ctx.setFillStyle('rgba(255, 255, 255, 0.1)');
                const lineWidth = width * 0.85;
                const lineX = (width - lineWidth) / 2;
                const lineY = 130; // 线条的y坐标，放在"钱拿走 车照开"和"最高额度"之间
                ctx.fillRect(lineX, lineY, lineWidth, 1); // 1px高的线条

                // 设置"最高额度"文本
                ctx.setFontSize(13);
                ctx.setFillStyle('#C1CCFF');
                ctx.font = '13px PingFangSC';
                const topLimit = '最高额度';
                let topLimitWidth = ctx.measureText(topLimit).width;
                ctx.fillText(topLimit, (width - topLimitWidth) / 2, 160);

                // 绘制金额 "100万"
                ctx.setFontSize(62);
                ctx.setFillStyle('#FFFFFF');
                ctx.font = '62px PingFangSC';
                const amount = this.info.product_quota + '万';
                let amountWidth = ctx.measureText(amount).width;
                ctx.fillText(amount, (width - amountWidth) / 2, 230);

                // **绘制底部白色区域**
                const whiteBoxHeight = 160;
                const whiteBoxY = height - whiteBoxHeight;
                ctx.setFillStyle('#FFFFFF');
                ctx.fillRect(0, whiteBoxY, width, whiteBoxHeight);

                // 左侧文字 "专属客户经理" 和 "手机号"
                // "专属客户经理"
                ctx.setFontSize(12);
                ctx.setFillStyle('#6E767A');
                ctx.font = '12px PingFangSC';
                ctx.fillText('专属客户经理：', 20, whiteBoxY + 30);

                // 客户经理姓名 "张三"
                ctx.setFontSize(14);
                ctx.setFillStyle('#2E3233');
                ctx.font = 'bold 14px PingFangSC'; // 使用 bold 实现加粗
                ctx.fillText(this.userInfo.name, 20, whiteBoxY + 50);

                // "手机号"
                ctx.setFontSize(12);
                ctx.setFillStyle('#6E767A');
                ctx.font = '12px PingFangSC';
                ctx.fillText('手机号码：', 20, whiteBoxY + 90);

                // 电话号码 
                ctx.setFontSize(14);
                ctx.setFillStyle('#2E3233');
                ctx.font = 'bold 14px PingFangSC'; // 使用 bold 实现加粗
                ctx.fillText(this.userInfo.tel, 20, whiteBoxY + 110);

                // 右侧二维码
                const qrCodeSize = 120;
                const qrCodeX = width - qrCodeSize - 10;
                const qrCodeY = whiteBoxY;
                ctx.drawImage(this.productQrCodePic, qrCodeX, qrCodeY, qrCodeSize, qrCodeSize);

                // 二维码下方的文字 "扫码了解更多"
                ctx.setFontSize(10);
                ctx.setFillStyle('#6E767A');
                const scanText = '扫码了解更多';
                ctx.font = '10px PingFangSC';
                let scanTextWidth = ctx.measureText(scanText).width;
                ctx.fillText(scanText, qrCodeX + (qrCodeSize - scanTextWidth) / 2, qrCodeY + qrCodeSize);

                // 底部提示 "*该产品二维码长期有效"
                ctx.setFontSize(9);
                ctx.setFillStyle('#6E767A');
                ctx.font = '9px PingFangSC';
                const noticeText = '*该产品二维码长期有效';
                let noticeTextWidth = ctx.measureText(noticeText).width;
                ctx.fillText(noticeText, (width - noticeTextWidth) / 2, height - 20);

                // 画布绘制完成，减少延迟等待时间
                ctx.draw(true, () => {
                    setTimeout(() => {
                        this.convertCanvasToImage();
                    }, 200);
                });
            },
            drawRoundRect(ctx, x, y, width, height, radius) {
                ctx.setFillStyle(this.order_main_placard_color || '#1226aa');
                ctx.beginPath();
                ctx.moveTo(x + radius, y);
                ctx.arcTo(x + width, y, x + width, y + height, radius);
                ctx.arcTo(x + width, y + height, x, y + height, radius);
                ctx.arcTo(x, y + height, x, y, radius);
                ctx.arcTo(x, y, x + width, y, radius);
                ctx.closePath();
                ctx.fill();
            },
            /**
             * 转图片
             */
            convertCanvasToImage() {
                uni.canvasToTempFilePath({
                    canvasId: 'myCanvas',
                    quality: 0.9,
                    success: (res) => {
                        this.imageSrc = res.tempFilePath;
                        uni.hideLoading();
                        console.log('图片渲染成功');
                    },
                    fail: (error) => {
                        uni.hideLoading();
                        uni.showToast({
                            title: '将画布转换为图片失败',
                            icon: 'none'
                        })
                        console.error('将画布转换为图片失败:', error);
                    }
                }, this);
            },
            /**
             * 保存图片
             */
            save() {
                if (!this.imageSrc) {
                    uni.showToast({
                        title: '图片生成中，请稍后再试',
                        icon: 'none'
                    });
                    return;
                }
                // 创建一个隐藏的 <a> 元素，设置下载属性
                const link = document.createElement('a');
                link.href = this.imageSrc; // 生成的图片路径
                link.download = '分享图片.png'; // 下载后的文件名
                link.style.display = 'none'; // 隐藏链接

                // 将 <a> 元素添加到页面并触发点击事件
                document.body.appendChild(link);
                link.click();

                // 移除链接元素
                document.body.removeChild(link);

                uni.showToast({
                    title: '图片保存成功',
                    icon: 'success',
                    duration: 2000
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    @import '@/assets/css/product/shareProduct.scss';
</style>